<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日历和闹钟</title>
    <style>
        #clock{
            position: relative;
            width: 170px;
            height: 89px;
        }
        #time{
            position: absolute;
            bottom: -40px;
            left: 20px;
            color: white;
            font-size: 48px;
        }
        #cald{
            margin-top: 80px;
            position: relative;
            width: 170px;
            height: 89px;
        }
        #date{
            position: absolute;
            bottom: -60px;
            left: 35px;
            color: black;
            font-size: 58px;
        }
        #week{
            position: absolute;
            bottom: 40px;
            left: 35px;
            color: white;
            font-size:24px;
        }
    </style>
</head>
<body onload="clock(),cald()" >
    <!--179000627余倍-->
    <!-- 时钟-->
    <div id="clock" >
        <img src="img/clock.png">
        <h1 id="time"></h1>
    </div>

    <!-- 日历-->
    <div id="cald" >
        <img src="img/cald.png">
        <h1 id="date"></h1>
        <h1 id="week"></h1>
    </div>
    <script>

        function clock() {
            let date = new Date();
            //获取时分秒
            let hours = date.getHours();
            let min = date.getMinutes();
            let second = date.getSeconds();

            //拼接字符串
            let str = `${hours}:${min}:${second}`;
            //显示在页面
            document.getElementById("time").innerHTML = str;
            //递归调用，每秒执行一次
            setTimeout("clock()",1000);
        }

        function cald() {
            //获取日期和星期
            let date = new Date();
            let day=date.getDate();
            let week=date.getDay();

            //把星期的数字转化为中文
            switch (week) {
                case 1:week="星期一";break;
                case 2:week="星期二";break;
                case 3:week="星期三";break;
                case 4:week="星期四";break;
                case 5:week="星期五";break;
                case 6:week="星期六";break;
                case 7:week="星期天";break;
            }

            //拼接字符串并显示到页面
            let str=`${day}`;
            let str1=`${week}`;
            document.getElementById("date").innerHTML = str;
            document.getElementById("week").innerHTML = str1;

        }
    </script>
</body>
</html>